<template>
  <el-dialog
    title="添加设备"
    :visible.sync="visible"
    width="640px"
    append-to-body
    custom-class="fen_control"
  >
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="风机名称" prop="equName">
        <el-input
          v-model="queryParams.equName"
          placeholder="请输入风机名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
        <el-button size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-transfer
      v-model="value"
      :props="{
        key: 'confEquId',
        label: 'equName'
      }"
      :titles="['设备列表','已选设备']"
      :data="equList"
      @change="change"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="submitForm">确定</el-button>
      <el-button size="small" @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listEqu, getEqu, delEqu, addEqu, updateEqu } from '@/api/fjgs/equ'
import { differenceBy, cloneDeep } from 'loadsh'
export default {
  data() {
    return {
      visible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        equType: 1
      },
      //   equList: [],
      value: [],
      queryEquList: [],
      currentEquList: []
    }
  },
  computed: {
    equList() {
      const diff = differenceBy(this.currentEquList, this.queryEquList, 'confEquId')
      if (diff.length) {
        return [...diff, ...this.queryEquList]
      } else {
        return this.queryEquList
      }
    }
  },
  methods: {
    getList() {
      this.loading = true
      listEqu(this.queryParams).then(response => {
        // this.equList = response.rows
        const queryEquList = []
        response.rows.map(e => {
          if (e.equOperation) {
            queryEquList.push({
              equName: e.equName,
              confEquId: e.equOperation.confEquId,
              frequency: e.equOperation.frequency,
              locationName: e.locationName
            })
          }
        })
        this.queryEquList = queryEquList
        this.total = response.total
        this.loading = false
      })
    },
    change(value, dirc, data) {
      const equList = cloneDeep(this.equList)
      const currentEquList = []
      equList.map(e => {
        if (value.includes(e.confEquId)) {
          currentEquList.push(e)
        }
      })
      this.currentEquList = currentEquList
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    open(options) {
    //   if (options) {
    //     this.value = JSON.parse(JSON.stringify(options))
    //   }
      this.visible = true
    },
    handEdit(index, row) {
      this.cruent = index
    },
    cancel() {
      this.value = []
      this.queryEquList = []
      this.currentEquList = []
      this.visible = false
    },
    submitForm() {
      this.$emit('success', cloneDeep(this.currentEquList))
      this.cancel()
    }
  }
}
</script>

<style lang="scss" >
.fen_control {
    .el-dialog__body {
        padding: 16px 20px;
    }
    .el-form-item__label {
        padding-bottom: 0;
    }
}

</style>

